<template>
  <Table class="default" filter v-bind="tableOpts" v-on="tableEvent">
    <template #operator>
      <div class="operator-wrap">
        <modifyAftersale ref="dialogRef" @change="fetchCurrentTable" />
        <modifyInOutInventory
          ref="modifyInOutInventory"
          @change="fetchCurrentTable"
        />
        <AftersaleMaterials
          ref="AftersaleMaterials"
          @change="fetchCurrentTable"
        />
      </div>
    </template>
  </Table>
</template>

<script>
import dayjs from "dayjs";
import modifyAftersale from "./components/modifyAftersale.vue";
import modifyInOutInventory from "./components/modifyInOutInventory.vue";
import tableMixins from "@/mixins/tableMixins.vue";
import AftersaleMaterials from "./dialog/AftersaleMaterials.vue";

export default {
  name: "AfterSaleAfterSaleList",
  mixins: [tableMixins],
  components: { modifyAftersale, modifyInOutInventory, AftersaleMaterials },
  // meta: { title: "售后管理", icon: "el-icon-s-cooperation", sort: 70 }, 后续讨论再开
  data() {
    return {
      apiName: "afterSaleAfterSaleList",
      form: {
        date: {
          tag: "el-date-picker",
          label: "时间范围",
          value: [],
          props: {
            rangeSeparator: "至",
            startPlaceholder: "开始时间",
            endPlaceholder: "结束时间",
            type: "daterange",
          },
        },
        afterSaleId: {
          tag: "el-input",
          label: "售后编号",
          value: "",
          props: {
            clearable: true,
            placeholder: "请输入售后编号",
          },
        },
        storeName: {
          tag: "el-input",
          label: "门店名称",
          value: "",
          props: {
            clearable: true,
            placeholder: "请输入门店名称",
          },
        },
        finishStatus: {
          tag: "el-select",
          label: "完成状态",
          value: "",
          items: [
            { label: "未完成", value: 0 },
            { label: "已完成", value: 1 },
          ],
          props: {
            clearable: true,
            filterable: true,
          },
        },
        isRestock: {
          tag: "el-select",
          label: "是否有补货",
          value: "",
          items: [
            { label: "否", value: 0 },
            { label: "是", value: 1 },
          ],
          props: {
            clearable: true,
            filterable: true,
          },
        },
      },
    };
  },
  methods: {
    formatData(res) {
      this.total = res?.count || res?.total || 0;
      this.dataSource = (res?.rows || res?.data || res || []).map((e) => {
        if (e.updatedAt)
          e.updatedTime = dayjs(e.updatedAt).format("YYYY-MM-DD HH:mm:ss");
        if (e.createdAt) {
          e.createdTime = dayjs(e.createdAt).format("YYYY-MM-DD HH:mm:ss");
        }
        e.warehouseName = e?.warehouse?.warehouseName;
        e.storeName = e?.sale?.storeName;
        return e;
      });
    },
    handleAction(opts, row) {
      const { afterSaleId: name, supplierId } = row;
      if (["edit"].includes(opts)) this.showDialog(opts, row);
      else if (opts === "modifyInOutInventory") {
        const ref = this.$refs["modifyInOutInventory"];
        ref &&
          ref.showDialog(opts, {
            ...row,
            targetId: row.afterSaleId,
            type: "afterSale",
          });
      } else if (opts === "delete")
        this.showConfirm(`确认删除【${name}】？`, "supplierSupplierDelete", {
          supplierId,
        });
      else {
        const ref = this.$refs[opts];
        ref && ref.showDialog(opts, row);
      }
    },
  },
};
</script>

<style lang="less" scoped>
.default /deep/ .el-button--primary {
  border-color: #ff6a00;
  background-color: #ff6a00;
}

.default /deep/ .el-button:hover {
  color: white;
  border-color: #f59a59;
  background-color: #f59a59;
}
.default /deep/ .el-button:active{
  color: white;
  border-color: #f59a59;
  background-color: #f59a59;
}
.default /deep/ .el-button:focus{
  color: #ff6a00;
  border-color: #fdf2e9;
  background-color:#fdf2e9;
}

/deep/ .el-input__inner:hover{
  border-color: #ff6a00 !important;
}
/deep/ .el-input__inner:focus{
  border-color: #ff6a00 !important;
}
/deep/ .selected{
  color:#ff6a00 !important;
}
/deep/ .active{
  color:#ff6a00 !important;
}
/deep/ .selected{
  color:#ff6a00 !important;
}
/deep/ .el-loading-text{
  color:#ff6a00 !important;
}
/deep/ .el-icon-loading{
  color:#ff6a00 !important;
}
</style>
